import React, {useEffect, useState} from "react";
import {createStyles} from "antd-style";
import useBackgroundImageStore from "@/components/Background/BackgroundImageStore.ts";
import {Button, Card, Flex, Image, Input, Modal, Slider, Space} from "antd";
import useThemeStore from "@/store/ThemeStore.ts";
import FileBucketApi, {FbInfo} from "@/api/web/FileBucketApi.ts";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
        `,
    }
})

const App: React.FC = () => {
    const styles = useStyles().styles;
    const {setSrc, src} = useBackgroundImageStore()
    const [inputImageSrc, setInputImageSrc] = useState<string>(src)
    const [modalOpen, setModalOpen] = useState(false)
    const setBgTransparency = useThemeStore(state => state.setBgTransparency)
    const bgTransparency = useThemeStore(state => state.bgTransparency)

    const [imageBucketList, setImageBucketList] = useState<FbInfo[]>([])

    useEffect(() => {
        let total = 100

        FileBucketApi.pageFbInfo(
            1, total, undefined, "image",
        ).then(async (res) => {
            if (res.data.total > total) {
                res = await FileBucketApi.pageFbInfo(1, total, undefined, "image")
            }
            setImageBucketList(res.data.records)
        })
    }, []);
    
    const onOk = () => {
        if (inputImageSrc == null || inputImageSrc.length == 0) {
            return
        }
        setSrc(inputImageSrc)
    }

    const modalClose = () => {
        setModalOpen(false)
    }

    return (
        <div className={styles.container}>
            <div>
                <p>背景透明度</p>
                <Slider
                    min={0x00}
                    max={0xff}
                    onChangeComplete={(value) => {
                        setBgTransparency(value)
                    }}
                    defaultValue={bgTransparency}
                />
            </div>
            <Card
                cover={
                    <Image
                        src={src}
                        alt="背景图预览"
                        preview={{
                            forceRender: true,
                        }}
                    />
                }
            >
                <Flex
                    justify="space-between"
                >
                    <Button
                        onClick={() => {
                            setModalOpen(true)
                        }}
                    >设置背景图</Button>
                </Flex>
            </Card>
            <Modal
                open={modalOpen}
                onCancel={modalClose}
                onOk={() => {
                    onOk()
                    modalClose()
                }}
                closable={false}
                style={{top: "30%"}}
            >
                <Card title={<p>设置图片容器随机背景</p>}>
                    <Space>
                        {imageBucketList.map(item => {
                            return (
                                <Button
                                    key={item.id}
                                    onClick={() => {
                                        setInputImageSrc(FileBucketApi.getRandomFileLink(item.id))
                                    }}
                                >
                                    {item.name}
                                </Button>
                            )
                        })}
                    </Space>
                </Card>
                <Card title={<p>手动设置链接</p>}>
                    <Input
                        placeholder={src}
                        value={inputImageSrc}
                        onChange={(evt) => {
                            setInputImageSrc(evt.target.value)
                        }}
                        allowClear
                    />
                </Card>
            </Modal>
        </div>
    )
}

export default App
